<template>
  <div>
    <h1>App</h1>
    <button @click="comp = 'Home'">Home</button>
    <button @click="comp = 'List'">List</button>
    <!-- 内置组件,使用必须添加v-bind绑定的is属性,作为占位符使用.-->
    <!-- is属性中传入已经引入并注册的组件,为字符串类型,根据is中的字符串加载对应的组件到当前占位符内  -->
    <keep-alive :include="['Home']">
      <!-- 由于页面不断切换,组件会不断加载,卸载,影响性能,所以对频繁操作的组件,可以使用keep-alive内置组件包裹,就可以实现加载页面时缓存到浏览器中,这样再次切换时 -->
      <!-- 就不会重载组件了 -->
      <!-- 可以通过添加include的方式设置那些组件拥有缓存
        include=''包含哪些组件的,传入值为字符串,多个字符串,使用","隔开,或者使用数组和正则表达式,当使用非字符串时就需要使用v-bind转换其为插值语法,
        exclude=''不包含哪些组件
       -->
      <component :is="comp" />
      <!-- 当添加了keep-aclive后,被保存的组件就不再存在生命周期,所以内部出现两个新的生命周期用于判断其活动或者失活 -->
    </keep-alive>
  </div>
</template>

<script>
import Home from './components/Home'
import List from './components/List'
export default {
  components: {
    Home,
    List,
  },
  data() {
    return {
      comp: 'Home',
    }
  },
}
</script>

<style></style>
